/* Copyright (c) 2012 Research In Motion Limited.
 * 
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * 
 * http://www.apache.org/licenses/LICENSE-2.0
 * 
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
import bb.cascades 1.0
import QtMobility.sensors 1.2
import bb.cascades.maps 1.0
import QtMobilitySubset.location 1.1
import bb.data 1.0
import bb.system.phone 1.0

// creates one page with a label
NavigationPane {
    id: nav
    
    onPopTransitionEnded: {
        Application.menuEnabled = true;
    }

    Menu.definition: MenuDefinition {
        actions: [
            ActionItem {
                imageSource: "asset:///images/about.png"
                title: "Acerca de"
                onTriggered: {
                    Application.menuEnabled = false;
                        var page = about.createObject();
                        nav.push(page);
                }
            }
        ]
    }

    Page {

        actions: [
            //! [0]
            ActionItem {
                id: near
                title: qsTr("Cerca")
                imageSource: "asset:///images/me.png"
                ActionBar.placement: ActionBarPlacement.OnBar
                onTriggered: {
                    mapview.latitude = positionSource.position.coordinate.latitude;
                    mapview.longitude = positionSource.position.coordinate.longitude;
                    mapview.altitude = 3000;
                }
            },
            ActionItem {
                title: qsTr("Palermo")
                imageSource: "asset:///images/boliche_btn.png"
                ActionBar.placement: ActionBarPlacement.InOverflow
                onTriggered: {
                    mapview.latitude = -34.584888;
                    mapview.longitude = -58.430813;
                    mapview.altitude = 3000;
                }
            },
            ActionItem {
                title: qsTr("Recoleta")
                imageSource: "asset:///images/boliche_btn.png"
                ActionBar.placement: ActionBarPlacement.InOverflow
                onTriggered: {
                    mapview.latitude = -34.58616;
                    mapview.longitude = -58.390644;
                    mapview.altitude = 3000;
                }
            },
            ActionItem {
                title: qsTr("Puerto Madero")
                imageSource: "asset:///images/boliche_btn.png"
                ActionBar.placement: ActionBarPlacement.InOverflow
                onTriggered: {
                    mapview.latitude = -34.608416;
                    mapview.longitude = -58.361706;
                    mapview.altitude = 3000;
                }
            },
            ActionItem {
                title: qsTr("San Telmo")
                imageSource: "asset:///images/boliche_btn.png"
                ActionBar.placement: ActionBarPlacement.InOverflow
                onTriggered: {
                    mapview.latitude = -34.619789;
                    mapview.longitude = -58.37157;
                    mapview.altitude = 3000;
                }
            }
        //! [0]
        ]
        Container {
            id: root
            layout: DockLayout {
            }

            ListView {
                id: listViewBoliche
                dataModel: XmlDataModel {
                    source: "xml/registro-locales-bailables.xml"
                }
                listItemComponents: [
                    ListItemComponent {
                        type: "item"
                        Container {
                            id: rootItem
                            onCreationCompleted: {
                                rootItem.ListItem.view.addPin(ListItemData);
                            }
                        }
                    }
                ]

                function addPin(item) {
                    console.log("creating pin for " + item.nombre);
                    pinContainer.addPin(item);
                }
            }

            ListView {
                id: listViewParking
                dataModel: XmlDataModel {
                    source: "xml/parking.xml"
                }
                listItemComponents: [
                    ListItemComponent {
                        type: "item"
                        Container {
                            id: rootItemParking
                            onCreationCompleted: {
                                rootItemParking.ListItem.view.addPinParking(ListItemData);
                            }
                        }
                    }
                ]

                function addPinParking(item) {
                    console.log("creating pin for " + item.street);
                    pinContainer.addPinParking(item);
                }
            }

            //! [1]
            MapView {
                id: mapview
                altitude: 3000
                latitude: -34.602923
                longitude: -58.381716
                preferredWidth: 768
                preferredHeight: 1280

                onRequestRender: {
                    pinContainer.updateMarkers();
                }

                onCreationCompleted: {
                    console.log("Creating pin for me");
                    pinContainer.showMe();
                }
            }
            //! [1]

            //! [7]
            Container {
                id: pinContainer
                // Must match the mapview width and height and position
                preferredHeight: 1280
                preferredWidth: 768
                //touchPropagationMode: TouchPropagationMode.PassThrough
                overlapTouchPolicy: OverlapTouchPolicy.Allow
                property variant currentBubble
                property variant me
                layout: AbsoluteLayout {
                }
                function addPinParking(item) {
                    var marker = pin.createObject();

                    marker.lat = item.latitude;
                    marker.lon = item.longitude;
                    marker.showBubble = false;
                    marker.pinImageSource = "asset:///images/estacionamiento.png"

                    var xy = _mapViewTest.worldToPixelInvokable(mapview, marker.lat, marker.lon);
                    marker.x = xy[0];
                    marker.y = xy[1];
                    pinContainer.add(marker);
                    marker.animDrop.play();
                }
                function addPin(item) {
                    var marker = pin.createObject();

                    marker.lat = item.lat;
                    marker.lon = item.lon;
                    marker.name = item.nombre;
                    marker.tel = item.tel;
                    marker.web = item.web;
                    marker.capacity = item.capacidad;
                    marker.dir = item.domicilio;
                    if (item.altura) {
                        marker.dir += " " + item.altura;
                    }

                    var xy = _mapViewTest.worldToPixelInvokable(mapview, marker.lat, marker.lon);
                    marker.x = xy[0];
                    marker.y = xy[1];
                    pinContainer.add(marker);
                    marker.animDrop.play();
                }
                function showBubble(pin) {
                    pinContainer.remove(currentBubble);
                    var details = bubble.createObject();

                    // bubble info
                    details.lat = pin.lat;
                    details.lon = pin.lon;
                    details.name = pin.name;
                    details.tel = pin.tel;
                    details.web = pin.web;
                    details.capacity = pin.capacity;
                    details.dir = pin.dir;

                    var xy = _mapViewTest.worldToPixelInvokable(mapview, details.lat, details.lon);
                    details.x = xy[0];
                    details.y = xy[1];
                    pinContainer.add(details);
                    details.play();
                    currentBubble = details;
                }
                function showMe() {
                    var marker = pin.createObject();
                    marker.pinImageSource = "asset:///images/me.png"
                    marker.pointerOffsetX = 30
                    marker.pointerOffsetY = 30
                    marker.showBubble = false;
                    pinContainer.insert(-1, marker);
                    marker.visible = false;
                    me = marker;
                }
                function updateMarkers() {
                    _mapViewTest.updateMarkers(mapview, pinContainer);
                }
                function removeBubble() {
                    pinContainer.remove(currentBubble);
                }
                onTouch: {
                    if (event.isDown()) {
                        if ((event.localX <= currentBubble.actualX) || (event.localX >= currentBubble.actualX + currentBubble.contentWidth) || (event.localY <= currentBubble.actualY) || (event.localY >= currentBubble.actualY + currentBubble.contentHeight)) {
                            removeBubble();
                        }
                    }
                }
            }
            //! [7]
        }
        attachedObjects: [
            //! [5]
            ComponentDefinition {
                id: pin
                source: "pin.qml"
            },
            ComponentDefinition {
                id: bubble
                source: "bubble.qml"
            },
            ComponentDefinition {
                id: about
                source: "about.qml"
            },
            Phone {
                id: phone
            },
            PositionSource {
                id: positionSource
                updateInterval: 1000
                active: true
                onPositionChanged: {
                    pinContainer.me.lat = positionSource.position.coordinate.latitude;
                    pinContainer.me.lon = positionSource.position.coordinate.longitude;
                    var xy = _mapViewTest.worldToPixelInvokable(mapview, pinContainer.me.lat, pinContainer.me.lon);
                    pinContainer.me.x = xy[0];
                    pinContainer.me.y = xy[1];
                    pinContainer.me.visible = true;
                }
            }
        //! [4]
        ]
    }
}
